<!--医疗服务申请页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">医疗申请单列表</span>
    <el-button type="primary" style="float:right;margin-top:13px;"
               @click="addApplicationDialogVisible=true">创建医疗申请单</el-button>
    <!--    :disabled="user.parentId==null">申请用车</el-button>-->
    <!--         如果一个人没有上级,说明是总裁,禁用此申请用车按钮,也可使用v-if让此按钮消失-->
  </div>
  <!-- 申请用车弹窗 -->
  <el-dialog title="创建申请单" v-model="addApplicationDialogVisible"
             style="width:1000px;padding:40px;"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="申请人">
            <el-input readonly :value="user.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医疗服务时间">
            <el-date-picker type="datetime" placeholder="选择日期时间" v-model="addForm.appointiment_time"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="住址">
            <el-input placeholder="请输入" :value="user.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="医疗服务类别">
            <!--            v-model="saveUserForm.level"要写在<el-select标签内，否则无法获取到值"-->
            <el-select placeholder="请选择" v-model="addForm.category" @change="handleSelectionChange">
              <el-option label="体检" ></el-option>
              <el-option label="护理" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="addApplication">确定</el-button>
    </template>
  </el-dialog>

  <!-- 用车申请列表 搜索卡片 -->
  <el-card style="margin: 20px;">
    <el-form style="padding-top:10px;">
      <el-row :gutter="30">
        <el-col :span="5">
          <el-form-item label="申请人">
            <el-input placeholder="请输入申请人" v-model="searchApplication.departureAddr"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="服务类别">
            <!--            v-model="saveUserForm.level"要写在<el-select标签内，否则无法获取到值"-->
            <el-select placeholder="请选择" v-model="searchApplication.destinationAddr" >
              <el-option label="体检" ></el-option>
              <el-option label="护理" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="申请单状态">
            <el-select placeholder="请选择" v-model="searchApplication.status">
              <el-option v-for="item in appOptions" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button @click="resetSearch">重置</el-button>
            <el-button type="primary" @click="loadApplication">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!-- 医疗申请表格 -->
  <el-card style="margin:20px">
    <el-table :data="tableData">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="user_id" label="申请人id"></el-table-column>
      <el-table-column align="center" prop="staffid" label="申请单id"></el-table-column>
      <el-table-column align="center" prop="audit_id" label="审核人id"></el-table-column>
      <el-table-column align="center" prop="appointiment_time" label="申请时间"></el-table-column>
      <el-table-column align="center" prop="update_time" label="更新时间"></el-table-column>
      <el-table-column align="center" prop="status" label="申请单状态" :formatter="appStatusFormatter"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <!--          只有当状态为"已发起(10)"时,才可以撤销,其他状态下撤销按钮禁用-->
          <el-button type="primary" size="small" link
                     :disabled="scope.row.status!=10" @click="cancel(scope.row.id)">撤销</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
//定义变量控制创建申请单弹窗是否出现
const addApplicationDialogVisible = ref(false);

//获取当前登录的用户信息
const user=ref(getUser());
//定义数组用来保存新增申请表单中的审批人(对象)
const auditUserOpts = ref([]);
//定义数组用来保存新增申请单时,对应的审批人的用户id,入库使用
const auditUserIdList = ref([]);

//定义数组用来保存新增申请表单中的起止时间,注意:这个数组包含起始时间与结束时间
const times=ref([]);
//定义对象用来保存新增申请单表单中的数据
const addForm=ref({
  appointiment_time: '',//出发地
  category: '',//目的地
  reason: '',//用车原因
  remark: ''//备注
});
const firstSelection=ref(addForm.value.category);
const secondSelection=ref('');
const handleSelectionChange = () => {
  firstSelection.value='';
  secondSelection.value=addForm.value.category;

}
//定义方法向后端发送新增申请单的请求
const addApplication=()=>{

  addForm.value.startTime=times.value[0];//给表单对象设置起始时间
  addForm.value.endTime=times.value[1];//给表单对象设置结束时间
  /*注意:审批人的id集合也要一起给到后端的,因为事务新增,审批表的数据也要一起新增*/
  addForm.value.auditUserIdList=auditUserIdList.value;
  console.log(addForm.value);

  let data=qs.stringify(addForm.value)
  axios.post(BASE_URL+"/v1/application/save",data).then((response)=>{
    if (response.data.code==2000) {
      ElMessage.success('新增成功');
      //关闭新增申请单弹窗
      addApplicationDialogVisible.value = false;
      times.value = [];//清空时间数组中的数据
      addForm.value = {};//清空新增申请表单对象中的数据
      //新增申请单后,重新加载申请数据
      loadApplication();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//定义处理弹窗关闭的方法
const handleClose = () => {
  if (confirm('您确定要关闭弹窗吗？')) {
    //关闭弹窗,并清空双向绑定的表单数据
    addApplicationDialogVisible.value = false;
    times.value = [];//清空时间数组中的数据
    addForm.value = { };//清空新增申请表单对象中的数据
  }
}



//准备数组对象用来保存申请单表格中的数据
const  tableData=ref([]);
//准备对象用来保存申请单搜索条件
const searchApplication=ref({
  departureAddr: '',
  destinationAddr: '',
  status: ''
});
//定义加载申请单的方法
const loadApplication=()=>{
  let data=qs.stringify(searchApplication.value);
  axios.get(BASE_URL+'/v1/application/select?'+data).then(response=>{
    if (response.data.code==2000) {
      tableData.value=response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
//定义重置搜索的方法
const resetSearch=()=>{
  searchApplication.value={}
  loadApplication();
}
//已进入页面就加载申请单
/*
onMounted(()=>{
  loadApplication();
})
*/

/*因为在main.js里面定义了全局方法9.来加载code对应的所有字典项*/
//定义数组用来保存申请单状态字典项数据
const appOptions = ref([]);
//一进到页面就根据code加载申请单状态字典项数据
/*
onMounted(()=>{
  loadDictOption(appOptions, 'application_status')
})
*/

//定义方法用来转换表格列的显示文字,将申请单状态转换成文字
const appStatusFormatter = (row, column, cellValue, index) => {
  if (!appOptions.value){//如果字典项数据为空
    return cellValue//,就直接返回当前单元格的值,这里是申请单的状态值,如10
  }
  // 如果字典项数据不为空,则遍历字典项数组,
  for(let item of appOptions.value){
    if (item.value==cellValue){//如果当前单元格值等于字典项的value值,
      cellValue= item.label//则将单元格值替换为字典项的文字(label值),如:待审核
    }
  }
  return cellValue;//将转换后的文字返回
}

//定义撤销用车申请的方法
const cancel = (id) => {
  axios.post(BASE_URL+'/v1/application/cancel/'+id).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success('撤销成功')
      loadApplication();//撤销后要重新加载申请单
    }else {
      ElMessage.error(response.data.msg)
    }
  })
}
</script>

<style scoped>
</style>